<template>
  <div class="scroll-view">
    <div class="scroll-view-box" :style="{height: scrollHeight*2 -4 + 'rpx'}">
      <scroll-view
        class="df scroll-view-scroll"
        scroll-x="true"
        enable-flex="true"
        show-scrollbar="false"
        enhanced="true"
        @scroll="seckillScroll"
        :style="{height: scrollHeight*2 + 4 + 'rpx'}"
      >
        <slot></slot>
      </scroll-view>
    </div>
    <div class="left df-l scroll-bar df br2 of">
      <div class="scroll-bar-color" :style="{width: barWidth}"/>
    </div>
  </div>
</template>

<style scoped lang="scss" rel="stylesheet/scss">
.scroll-view{
  position: relative;
  margin-bottom: 6px;
  &::-webkit-scrollbar {
    display:none;
    width:0;
    height:0;
    color:transparent;
  }
  .scroll-view-box{
    margin: 0 12px;
    width: calc(100% - 24px);
    overflow: hidden;
    .scroll-view-scroll{
      white-space: nowrap;
      &::-webkit-scrollbar {
        display:none;
        width:0;
        height:0;
        color:transparent;
      }
    }
  }
  .scroll-bar{
    position: absolute;
    height: 2px;
    width: 40px;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #E8E8E8;
    .scroll-bar-color{
      height: 100%;
      background: #287C59;
    }
  }
}
</style>

<script type="text/babel">
  /**
   * Author: MqDuan
   * Create Time: 2020/10/19
   * Description:
   */

  export default {
    name: "ImageBox",
    props: {
      list: {
        type: Array,
        default: [],
      },
      scrollHeight: {
        type: Number,
        default: '0'
      },
    },
    components: {},
    data() {
      return {
        barWidth: 0 + 'px',
      }
    },
    computed: {},
    watch: {

    },
    methods: {
      seckillScroll(e) {
        const scrollLeft = e.target.scrollLeft;
        const scrollWidth = e.target.scrollWidth; // 可滚动的距离
        const windowWidth = wx.getSystemInfoSync().windowWidth;
        this.barWidth = (scrollLeft/(scrollWidth - windowWidth - 26 )) * 40 + 'px';
      },
    },
    mounted() {

    },
  }
</script>

